<template>
  <div class="zhifu">
    <el-row>
      <el-col :span="18">
        <el-table
          :data="payshop"
          style="width: 100%"
        >
          <el-table-column
            label="产品名称"
            width="100px"
          >
            <template slot-scope="scope">
              <img
                :src="'http://139.198.178.82:9090/Shopping/'+scope.row.product.defaultImg"
                style="width:70px;height:70px"
              >
            </template>
          </el-table-column>
          <el-table-column
            label=""
            width="600px"
          >
            <template slot-scope="scope">
              {{scope.row.product.name}}
            </template>
          </el-table-column>
          <el-table-column
            label="数量"
            width=""
          >
            <template slot-scope="scope">
              {{scope.row.quantity}}
            </template>
          </el-table-column>
          <el-table-column
            label="合计价格"
            width=""
          >

            <template slot-scope="scope">
              ￥{{scope.row.quantity * scope.row.product.shopPrice/100}}
            </template>
          </el-table-column>
        </el-table>
        <div>
          <h3>选择常用联系人</h3>
          <div>
            <p
              v-for="item in contact"
              :key="item.id"
            >
              <el-radio-group
                v-model="contactFlagId"
                @change="selectContact"
              >
                <el-radio :label="item.id">{{''}}</el-radio>
              </el-radio-group>
              姓名: <span>{{item.name}}</span> 联系电话: <span>{{item.mobile}}</span> 地址: <span>{{item.address}}</span>
            </p>
          </div>
        </div>
        <!-- 积分抵用 -->
        <div>
          当前积分：14 <el-switch
            v-model="istrue"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch> 是否启用积分
        </div>
        <!-- 支付方式 -->
        <div>
          <h3>请选择支付方式</h3>
          <a @click="zhifu">电子钱包(余额:{{this.amount}})</a>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="width:80%">
          <el-form label-width="120px">
            <el-form-item label="商品总价：">
              {{zongjia}}
            </el-form-item>
            <el-form-item label="物流费用：">
              包邮
            </el-form-item>
            <el-form-item label="合计金额：">
              {{zongjia}}
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "zhifu",
  data() {
    return {
      payshop: [],
      contact: [],
      ordernum: "",
      contactFlagId: "",
      istrue: false,
      zongjia: "",
      amount: "",
      paymentType: "",
    };
  },
  methods: {
    getpayshop() {
      this.$post(this.url + "/order/orderDetail", {
        userId: this.$store.state.user.id,
        // userId: 123647,
        orderNum: this.ordernum,
        // orderNum: "O20211218111217",
      }).then((res) => {
        if (res.errorCode == 0) {
          this.payshop = res.data.orderItemList;
          this.zongjia = res.data.price / 100;
        }
      });
    },
    //   获取常用联系人
    getContact() {
      this.$post(this.url + "/content/selectContent", {
        userId: this.$store.state.user.id,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.contact = res.data;
          this.contact.forEach((element) => {
            if (element.contactFlag == 1) {
              this.contactFlagId = element.id;
              console.log(this.contactFlagId);
            }
          });
        }
      });
    },
    // 获取余额
    getyue() {
      this.$post(this.url + "/account/userAccount", {
        userId: this.$store.state.user.id,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.amount = res.data;
        }
      });
    },
    // 支付
    yuezhifu() {
      if (this.contactFlagId == "") {
        this.$message.warning("请添加联系人后再支付");
      } else if (this.amount > this.zongjia) {
        this.$post(this.API.API_URL_CUSTOMER_Pay_Order, {
          userId: this.$store.state.user.id,
          amount: -this.zongjia,
        }).then((res) => {
          if (res.errorCode == "0") {
            this.paymentType = 2;
            this.zhifu();
          }
        });
      } else {
        this.$message({
          message: "余额不足,请充值",
          type: "warning",
        });
      }
    },
    zhifu() {
      this.$post(this.url + "/order/payMent", {
        userId: this.$store.state.user.id,
        orderNum: this.ordernum,
        isIntegral: 0,
        contectId: this.contactFlagId,
      }).then((res) => {
        this.$message({
          message: "支付成功,正在跳转",
          type: "success",
        });
        this.$router.push("/center/myorder");
      });
    },
    // 更改联系人
    selectContact() {
      console.log(this.contactFlagId);
      this.$post(this.url + "/content/setContent", {
        userId: this.$store.state.user.id,
        id: this.contactFlagId,
        contactFlag: 1,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      });
    },
  },
  created() {
    this.ordernum = sessionStorage.getItem("ordernum");
    this.getpayshop();
    this.getContact();
    this.getyue();
  },
};
</script>

<style scoped>
</style>